<template>
<div class="toolbar">
          <el-dropdown>
            <el-icon style="width: 16px; height: 16px; background-color: rgb(255, 253, 253); border-radius: 50%; color: #fff; text-align: center; line-height: 16px; margin-right: 8px; margin-top: 1px;">  
</el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="showInfoPopup">个人中心</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span class="profile-icon">{{ user.name }}</span>
        </div>
</template>


<script>
import router from "@/router/index";  
import { ref } from 'vue'  
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'  
  
export default {  
  name: "Header",  
  data() {  
    return {  
      user: JSON.parse(localStorage.getItem('user'))  
    }  
  },  
  methods: {  
    logout() {  
      router.push('./login')  
      localStorage.clear()  
    },  
    showInfoPopup() {  
        let genderText = '';  
        if (this.user.sex === 1) {  
          genderText = '男';  
        } else if (this.user.sex === 4) {  
          genderText = '女';  
        }  
      this.$alert('用户名：'+ this.user.name+ '\n账号：' + this.user.no+ '\n年龄：' + this.user.age+ '\n性别：' + genderText + '\n电话：' + this.user.phone, {  
        confirmButtonText: '确定'  
      });  
  },   
  }  
}
</script>

<style scoped>
.profile-icon {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  width: 70px; /* 调整为适合头像的大小 */  
  height: 50px; /* 调整为适合头像的大小 */  
  border-radius: 50%; /* 使其成为圆形 */  
  background-color: rgb(109, 157, 253); 
  }
</style>